<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>完善当当购物车页面</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			body{
				width: 800px;
				margin: 0 auto;
				position: relative;
			}
			.clear:after{
				content: "";
				display: block;
				clear: both;
			}
			.close{
				float: right;
				position: absolute;
				top:15px;
				right: 20px;
			}
			.close input,#calc input{
				width: 40px;
				height: 30px;
				color: white;
				background-color: red;
				border-radius: 10px;								
			}
			#button1{
				position: absolute;
				top: 170px;
				right:20px ;
			}
			#button1 input,#button2 input{
				margin-top: 10px;
			}
			#button2{
				position: absolute;
				top: 280px;
				right: 20px;
			}
			#pri1 input{
				width: 48px;
				text-align: center;
				background: transparent;
				border: none;
			}
			#pri1{
				position: absolute;
				top: 180px;
				left: 390px;
			}
			#amo1 span{
				width: 30px;
			}
			#amo1{
				position: absolute;
				top: 180px;
				right: 220px;
			}
			#total1{
				position: absolute;
				top: 180px;
				right: 110px;
			}
			
			
			#pri2 input{
				width: 48px;
				text-align: center;
				background: transparent;
				border: none;
			}
			#pri2{
				position: absolute;
				top: 300px;
				left: 390px;
			}
			#amo2 span{
				width: 30px;
			}
			#amo2{
				position: absolute;
				top: 300px;
				right: 220px;
			}
			#total2{
				position: absolute;
				top: 300px;
				right: 110px;
			}
			#calc{
				position: absolute;
				top:410px;
				right: 25px;
			}
			#sum input{
				width: 50px;				
			}
			#sum{
				position: absolute;
				top: 410px;
				right: 130px;
			}
			#amo1 span{
				display: inline-block;
				width: 30px;
				height: 20px;
				font-size: 13px;
				border: 1px solid gainsboro;
			}
			#amo2 span{
				display: inline-block;
				width: 30px;
				height: 20px;
				font-size: 13px;
				border: 1px solid gainsboro;
			}
			#last{
				height: 100px;
				border:1px solid black;
			}
		</style>
	</head>
	<body class="clear">
		<div class="logo"><img src="../img1/dd_logo.jpg"/></div>
		<div class="close">
			<input type="button" value="关闭" onclick="closewindow()"/>
		</div>
		<div>
			<img src="../img3/shoppingBg.jpg"/>
			
			<div id="button1">
				<input type="button" value="移入收藏" onclick="store()"/><br />
				<input type="button" value="删除" onclick="deleteOne()"/>
			</div>
			<div id="button2">
				<input type="button" value="移入收藏" onclick="store()"/><br />
				<input type="button" value="删除" onclick="deleteOne()"/>
			</div>			
		</div>
		<!--第一件商品信息-->
		<div id="pri1">			
			¥<input type="number" name="price" value="21.90" disabled /><!--单价-->
		</div>
		<div id="amo1">
			<input type="button" name="reduce" value=" - " onclick="reduce(1)" /><!--减少-->
			<span id="amount1" name="quantity">1</span><!--数量-->
			<input type="button" name="add" value=" + " onclick="add(1)" /><!--增加-->
		</div>
		<div id="total1">
			¥<span name="totalprice">21.90</span><!--金额-->
		</div>
		
		<!--第二件商品信息-->
		<div id="pri2">
			¥<input type="number" name="price" value="24.00" disabled style="background-color: white;"/><!--单价-->
		</div>
		<div id="amo2">
			<input type="button" name="reduce" value=" - " onclick="reduce(2)" /><!--减少-->
			<span id="amount2" name="quantity">1</span><!--数量-->
			<input type="button" name="add" value=" + " onclick="add(2)" /><!--增加-->
		</div>
		<div id="total2">
			¥<span name="totalprice">24.00</span><!--金额-->
		</div>
		
		<!--总计-->
		<div id="sum">
			¥<span name="sum">45.90</span>
		</div>		
		
		<!--结算-->
		<div id="calc">
			<input type="button" value="结算" onclick="show()"/>
		</div>
		
		<div id="last" style="display: none;"></div>
		<script>
			 function closewindow(){
			 	window.close();
			 }
			 function store(){
			 	var flag=confirm("移入收藏后,将不在购物车显示,是否继续操作？");
			 	if(flag)
			 		alert("移入收藏成功！");
			 }
			 function deleteOne(){
			 	 var flag=confirm("您确定要删除商品吗？");
			 	 if(flag){
			 	 	alert("删除成功！");
			 	 }
			 	 	
			 }
			function add(num){	
				var am1=document.getElementById("amo1").firstElementChild.nextElementSibling;
				var am2=document.getElementById("amo2").firstElementChild.nextElementSibling;
				switch(num){
					case 1:
					am1.innerHTML=parseInt(document.getElementById("amo1").firstElementChild.nextElementSibling.innerHTML)+1;
					document.getElementById("total1").lastElementChild.innerHTML=(parseInt(am1.innerHTML)*21.90).toFixed(2);
					calc();
						break;
					case 2:
					am2.innerHTML=parseInt(document.getElementById("amo2").firstElementChild.nextElementSibling.innerHTML)+1;
					document.getElementById("total2").lastElementChild.innerHTML=(parseInt(am2.innerHTML)*24.00).toFixed(2);
					calc();
						break;
				}			
			}
			function reduce(num){		
				var am1=document.getElementById("amo1").firstElementChild.nextElementSibling;
				var am2=document.getElementById("amo2").firstElementChild.nextElementSibling;
				switch(num){
					case 1:
					if(parseInt(am1.innerHTML)>1){
						am1.innerHTML=parseInt(document.getElementById("amo1").firstElementChild.nextElementSibling.innerHTML)-1;
						document.getElementById("total1").lastElementChild.innerHTML=(parseInt(am1.innerHTML)*21.90).toFixed(2);
						calc();
					}else{
						alert("不能再减了,再减就没有啦！");
					}					
						break;
					case 2:
					if(parseInt(am2.innerHTML)>1){
						am2.innerHTML=parseInt(document.getElementById("amo2").firstElementChild.nextElementSibling.innerHTML)-1;
						document.getElementById("total2").lastElementChild.innerHTML=(parseInt(am2.innerHTML)*24.00).toFixed(2);
						calc();
					}else{
						alert("不能再减了,再减就没有啦！");
					}
						break;
				}			
			}
			function calc(){
				var priList=document.getElementsByName("totalprice");
				var sum=0;
				for(var i=0;i<priList.length;i++){
					sum+=parseFloat(priList[i].innerText);
				}
				document.getElementById("sum").lastElementChild.innerHTML=sum;
			}	
			
			function show(){			
				var good1=document.getElementById("total1").innerHTML;
				var good2=document.getElementById("total2").innerHTML;
				var total=document.getElementById("sum").innerHTML;
				var info="您本次购买的商品信息如下：<br/>白岩松：白说："+good1+"<br/>"+"岛上书店："+good2+"<br/>"+"商品共计:"+total;
				document.getElementById("last").innerHTML=info;
				document.getElementById("last").style.display="block";
			}
		</script>
	</body>
</html>

